<template>
	<view class="page">
		<view class="nav flex_center">
			
			<view class="back">
				<u-icon name="arrow-left" size="40rpx" @click="$util.back()"></u-icon>
				<!--  -->
			</view>
		
			<view class="search flex_r_around">
				<u-search :showAction="true" actionText="搜索" :actionStyle="{
					width: '120rpx',
					height: '56rpx',
					background: '#FD2A53',
					borderRadius: '36rpx',
					fontWeight: '500',
					fontSize: '24rpx',
					color: '#FFFFFF',
					lineHeight: '56rpx',
					textAlign: 'center',
				}" :animation="false" @search="onSearch" @custom="onSearch" v-model="key"></u-search>
			</view>
		
			<view class="back" @click="show_select = true">
				<image :src="$util.prefix('store/icon_screen.png')"></image>
			</view>
		</view>
		
		<view class="nav_box"></view>
		
		<view class="tab">
			<scroll-view scroll-x="true">
				<view class="flex_center">
					<view class="tab-item" @click="onTab(0)" :id="status == 0 ? 'select' : ''">全部</view>
					<view class="tab-item" @click="onTab(2)" :id="status == 2 ? 'select' : ''">待接单({{ one }})</view>
					<view class="tab-item" @click="onTab('3,4')" :id="status == '3,4' ? 'select' : ''">已接单({{ two }})</view>
					<view class="tab-item" @click="onTab('5,6')" :id="status == '5,6' ? 'select' : ''">已完成</view>
					<view class="tab-item" @click="onTab(11)" :id="status == 11 ? 'select' : ''">售后</view>
				</view>
			</scroll-view>
		</view>
		
		<empty v-if="!list.length"></empty>
		
		<view class="container">
			<view class="list" v-for="(item,index) in list" :key="index" @click="$util.toUrl(`/pages/store/order/orderContent?id=${item.id}`)">
				<view class="flex_center">
					<view class="image">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="text">
						<view class="name flex_center">
							<text>{{ item.name }}</text>
							<!-- 到店 -->
							<view v-if="item.express_type == 1">
								{{
									item.status == 5 ? '已完成'
									: item.status == 6 ? '已评价'
									: item.return_status == 2 ? '退款申请中'
									: item.return_status == 3 ? '已退款'
									: item.return_status == 4 ? '退款驳回'
									: item.return_status == 5 ? '商家同意退款'
									: item.status == 1 ? '待支付'
									: item.status == 2 ? '待接单'
									: item.status == 3 ? '待使用'
									: item.status == 4 ? '待使用'
									: item.status == 7 ? '已退款'
									:''
								}}
							</view>
							<!-- 上门 -->
							<view v-if="item.express_type == 2">
								{{
									item.status == 5 ? '已完成'
									: item.status == 6 ? '已评价'
									: item.return_status == 2 ? '退款申请中'
									: item.return_status == 3 ? '已退款'
									: item.return_status == 4 ? '退款驳回'
									: item.return_status == 5 ? '商家同意退款'
									: item.status == 1 ? '待支付'
									: item.status == 2 ? '待接单'
									: item.status == 3 ? '待服务'
									: item.status == 4 ? '服务中'
									: item.status == 7 ? '已退款'
									:''
								}}
							</view>
							<!-- 邮寄 -->
							<view v-if="item.express_type == 3">
								{{
									item.status == 5 ? '已完成'
									: item.status == 6 ? '已评价'
									: item.return_status == 2 ? '退款申请中'
									: item.return_status == 3 ? '已退款'
									: item.return_status == 4 ? '退款驳回'
									: item.return_status == 5 ? '商家同意退款'
									: item.status == 1 ? '待支付'
									: item.status == 2 ? '待接单'
									: item.status == 3 ? '待发货'
									: item.status == 4 ? '已发货'
									: item.status == 7 ? '已退款'
									:''
								}}
							</view>
						</view>
						
						<view class="time flex_center">
							<view>
								下单时间：{{ item.create_time }}
							</view>
							
							<text>￥{{ item.service_price }}</text>
						</view>
					</view>
				</view>
				
				<view class="btn-box flex_center">
					<view class="border-btn flex_r_around" v-if="item.status == 2" @click.stop="acceptOrder(item)">
						<text>接单</text>
					</view>
					
					<view class="border-btn flex_r_around" @click.stop="toDispatch(item)" v-if="(item.status == 3 || item.status == 4) && item.express_type == 2 && auth == 1">
						<text>派单</text>
					</view>
					
					<view class="border-btn flex_r_around" @click.stop="sendOrder(item)" v-if="item.status == 3 && item.express_type == 3">
						<text>发货</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 订单筛选 -->
		<u-popup :safeAreaInsetBottom="false" :show="show_select" @close="show_select = false" bgColor="transparent">
			<view class="select_box">
				<view class="header flex_r_between">
					<view class="icon flex_r_between">
		
					</view>
					<text>订单筛选</text>
					<view class="icon flex_r_between" @click="show_select = false">
						<u-icon name="close" color="#131313" size="40rpx"></u-icon>
					</view>
				</view>
		
				<view class="title">下单时间</view>
				<view class="time_box flex_r_between">
					<view class="time_item" @click="start_show = true">
						<uni-dateformat :date="start" format="yyyy-MM-dd" v-if="start"></uni-dateformat>
						<text v-else>起始时间</text>
					</view>
					<view class="line"></view>
					<view class="time_item" @click="onEnd">
						<uni-dateformat :date="end" format="yyyy-MM-dd" v-if="end"></uni-dateformat>
						<text v-else>截止时间</text>
					</view>
				</view>
		
		
				<view class="title">商品类别</view>
				<view class="time_box flex_r_between">
					<view class="time_item hidden" @click="show = true">{{ category_name || '请选择' }}</view>
				</view>
		
				<view class="btn_box flex_r_between">
					<view class="btn_item cancel" @click="onResetSelect">重置</view>
					<view class="btn_item confirm" @click="onConfirmSelect">确定</view>
				</view>
		
			</view>
		</u-popup>
		
		<u-picker keyName="name" :show="show" ref="uPicker" :columns="columns" @cancel="show = false"
			@close="show = false" @change="onColumnsChange" @confirm="onColumnsComfirm" :closeOnClickOverlay="true">
		</u-picker>
		
		<u-datetime-picker :show="start_show" mode="date" :maxDate="now" :closeOnClickOverlay="true"
			@close="start_show = false" @cancel="start_show = false" @confirm="confirmStart">
		</u-datetime-picker>
		
		<u-datetime-picker :maxDate="now" :minDate="start" :show="end_show" mode="date" :closeOnClickOverlay="true"
			@close="end_show = false" @cancel="end_show = false" @confirm="confirmEnd">
		</u-datetime-picker>
	
		<!-- 发货快递单号 -->
		<u-modal :show="send_model" title="确认发货" cancelText="取消" :showCancelButton="true" :asyncClose="true"
			:closeOnClickOverlay="true" @close="send_model = false" @cancel="send_model = false" @confirm="onSend">
			<view class="slot-content">
				<view class="model_content flex_r_around">
					<input placeholder="请输入快递单号" v-model="send_num" type="text" placeholder-class="input-placeholder">
				</view>
			</view>
		</u-modal>
	
	</view>
</template>

<script>
	import empty from "@/compentents/empty/empty.vue";
	export default {
		components: {
			empty
		},
		data() {
			return {
				show_select: false,
				
				total: 1,
				page: 1,
				list: [],
				key: '',
				status: 0,
				
				start_show: false,
				end_show: false,
				start: 0,
				end: 0,
				now: 0,
				
				show: false,
				category_pid: 0,
				category_pname: '',
				category_id: 0,
				category_name: '',
				// 产品分类
				columns: [
					[],
				],
				
				
				one: 0,
				two: 0,
				
				send_num: '',
				send_item: {},
				send_model: false,
				
				auth: 0,
			}
		},
		methods: {
			onSearch() {
				this.refreshList();
			},
			
			onTab(e){
				this.status = e;
				this.refreshList();
			},
			
			refreshList(){
				this.page = 1;
				this.total = 1;
				this.list = [];
				this.getList();
			},
			
			getList() {
				if (this.start == 0 || this.end == 0) {
					var time = ``
				} else {
					var time =
						`${uni.$u.timeFormat(this.start, 'yyyy-mm-dd hh:MM:ss')} - ${uni.$u.timeFormat(this.end, 'yyyy-mm-dd hh:MM:ss')}`
				}
				this.$get('/store.order/getStoreOrderList', {
					status: this.status,
					page: this.page,
					time: time,
					category_pid: this.category_pid,
					category_id: this.category_id,
					key: this.key,
					auth: this.auth,
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				})
			},
			
			acceptOrder(item) {
				// 接单
				this.$get('/order/acceptOrder', {
					order_id: item.id,
					auth: this.auth,
				}).then(res => {
					this.$util.msg('已接单');
					this.refreshList();
				})
			},
			
			getProductTags() {
				this.$get('/store.store_category/getStoreCategory').then(res => {
					this.storeType = res.data;
					res.data.forEach((element) => {
						this.columns[0].push({
							"name": element.name,
							"pid": element.pid,
							"id": element.id,
						});
					})
				})
			},
			
			onColumnsComfirm(e) {
				this.category_name = e.value[0].name;
				this.category_id = e.value[0].id;
				this.show = false;
			},
			
			onColumnsChange(e) {
				
			},
			
			onEnd() {
				if (!this.start) {
					return this.$util.msg('请先选择开始时间')
				}
				this.end_show = true;
			},
			
			confirmStart(e) {
				this.start = e.value;
				this.start_show = false;
			},
			
			confirmEnd(e) {
				this.end = e.value;
				this.end_show = false;
			},
			
			onConfirmSelect() {
				this.refreshList();
				this.start_show = false;
				this.end_show = false;
				this.show_select = false;
			},
			
			onResetSelect() {
				this.start = 0;
				this.end = 0;
				this.category_pid = 0;
				this.category_id = 0;
				this.key = '';
				this.refreshList();
				this.start_show = false;
				this.end_show = false;
				this.show_select = false;
			},
			
			getOrderStatusData() {
				this.$post('/store.order/getOrderStatusData',{
					auth: this.auth
				}).then(res => {
					this.one = 0;
					this.two = 0;
					this.three = 0;
					this.four = 0;
					this.five = 0;
					res.data.forEach(element => {
						if (element.status == 2) {
							this.one += element.num;
						}
			
						if (element.status == 3) {
							this.two += element.num;
						}
					});
				})
			},
			
			// 改派
			toDispatch(item){
				this.$util.toUrl(`/pages/newstore/dispatch?lat=${item.lat}&lng=${item.lng}&circle_id=${item.circle_id}&id=${item.id}`);
			},
			
			// 发货
			sendOrder(item) {
				// 退款
				this.send_item = item;
				this.send_model = true;
			},
			
			onSend() {
				if (!this.send_num) {
					this.send_model = false;
					return this.$util.msg('请输入快递单号');
				}
			
				this.$get('/order/startOrder', {
					order_id: this.send_item.id,
					tracking_number: this.send_num
				}, true, (e) => {
					this.send_model = false;
				}).then(res => {
					this.send_num = '';
					this.send_model = false;
					this.refreshList();
					this.$util.msg('发货成功');
				})
			},
			
		},
		
		onLoad(option) {
			this.getProductTags();
			this.now = new Date().getTime();
			
			this.auth = option.auth || 0;
			this.status = option.status || 0;
			
			this.refreshList();
			
			this.getOrderStatusData();
		},
		
		onReachBottom() {
			if(this.total > this.page){
				this.page++;
				this.getList();
			}
		}
	}
</script>

<style lang="less" scoped>
	.nav {
		padding-top: var(--paging-head-top);
		box-sizing: content-box;
		height: 100rpx;
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		background: #FFF;
		z-index: 99;
	
		.search {
			padding-right: 24rpx;
			flex: 1;
			height: 72rpx;
			background: #F3F3F3;
			border-radius: 36rpx;
		}
	
		.back {
			padding: 10rpx 24rpx;
	
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	
	.nav_box {
		padding-top: var(--paging-head-top);
		height: 204rpx;
		box-sizing: content-box;
	}

	.tab {
		position: fixed;
		top: calc(100rpx + var(--paging-head-top));
		left: 0;
		background: #FFF;
		z-index: 99;
		width: 100vw;
		padding: 24rpx;
		height: 104rpx;
		
		.tab-item {
			height: 56rpx;
			background: #F1F1F1;
			border-radius: 12rpx;
			padding: 0 16rpx;
			font-size: 26rpx;
			color: #333333;
			line-height: 56rpx;
			transition: 0.6s;
			margin-right: 16rpx;
		}
		
		#select {
			background: #FFEAEE;
			color: #FD2A53;
		}
	}

	.container {
		padding: 24rpx 24rpx 10rpx;
		overflow: hidden;
		.list {
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 32rpx;
			overflow: hidden;
			margin-bottom: 24rpx;
			
			.image {
				width: 128rpx;
				height: 128rpx;
				background: #D8D8D8;
				border-radius: 12rpx;
				overflow: hidden;
				margin-right: 20rpx;
				image {
					width: 128rpx;
					height: 128rpx;
				}
			}
			
			.text {
				flex: 1;
				overflow: hidden;
				
				.name {
					overflow: hidden;
					margin-bottom: 40rpx;
					text {
						flex: 1;
						font-weight: 500;
						font-size: 28rpx;
						color: #131313;
					}
					
					view {
						font-size: 28rpx;
						color: #FD2A53;
					}
				}
				
				.time {
					view {
						font-size: 24rpx;
						color: #999999;
						flex: 1;
					}
					
					text {
						font-weight: 600;
						font-size: 28rpx;
						color: #131313;
						line-height: 32rpx;
					}
				}
			}
	
			.btn-box {
				flex-direction: row-reverse;
				
				.border-btn {
					border: 2rpx solid #CCCCCC;
					width: 168rpx;
					height: 64rpx;
					background: #FFFFFF;
					border-radius: 32rpx;
					margin: 32rpx 0 0 24rpx;
					overflow: hidden;
					
					text {
						font-size: 28rpx;
						color: #131313;
					}
				}
			}
		}
	}

	.select_box {
		padding: 0 32rpx 60rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	
		.header {
			height: 80rpx;
	
			.icon {
				width: 60rpx;
				height: 60rpx;
			}
	
			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #131313;
			}
		}
	
		.title {
			margin: 48rpx 0 32rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #131313;
		}
	
		.time_box {
			.time_item {
				width: 312rpx;
				height: 72rpx;
				padding: 0 16rpx;
				background: #F7F7F7;
				border-radius: 36rpx;
				font-size: 28rpx;
				color: #999999;
				text-align: center;
				line-height: 72rpx;
			}
	
			.line {
				width: 24rpx;
				height: 4rpx;
				background: #CCCCCC;
			}
		}
	
		.btn_box {
			margin-top: 120rpx;
	
			.btn_item {
				width: 332rpx;
				height: 88rpx;
				border-radius: 16rpx;
				font-size: 28rpx;
				line-height: 88rpx;
				text-align: center;
			}
	
			.cancel {
				background: #F1F1F1;
				color: #131313;
			}
	
			.confirm {
				background: #FD2A53;
				color: #FFF;
			}
		}
	
	}

</style>
